/**
 * 可编辑表格
 * @author SPY
 * @date 2020/05/27
 */
import React from 'react';
import { Form, Button, Space, message } from 'antd';
import TableEdit from './Table/EditTable';

const data = {
  tableList: [
    {
      name: '马云',
      deptName: '公司合伙人',
      jobName: '吃喝玩乐',
      relation: '1',
      remark: '有钱人',
      viewObject: true,
    },
  ],
};

const TableEditPage = () => {
  const [form] = Form.useForm();

  // 提交数据
  const handleSubmit = () => {
    const originValues = form.getFieldsValue().tableList;
    const values = Object.keys(originValues).map((i: any) => originValues[i]);
    console.log('提交的values:', values);
    message.success('数据已收集,打开控制台查看！');
  };

  // 填充数据
  const handleFill = () => {
    form.setFieldsValue({ tableList: data.tableList });
  };

  return (
    <div>
      <TableEdit form={form} />
      <Space style={{ marginTop: 10 }}>
        <Button type="primary" onClick={handleSubmit}>
          提交数据
        </Button>
        <Button type="primary" onClick={handleFill}>
          填充数据
        </Button>
      </Space>
    </div>
  );
};

TableEditPage.title = '可编辑的列表表格';

export default TableEditPage;
